<!--
 * @Author: 宋杰
 * @Date: 2020-12-30 22:28:01
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-12 14:19:56
 * @Description: 一家十一口(猜一字) 账号管理
-->
<template>
  <div class="div1">
    <!-- 头部搜索框 -->
    <div class="div2">
      <div class="topBox3">
        <div class="topBox3_sou">
          <div>
            <el-select v-model="value" placeholder="账户状态">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select v-model="value2" placeholder="全部角色">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-input v-model="input1" placeholder="用户名"></el-input>
          </div>
          <div>
            <el-input v-model="input2" placeholder="联系方式"></el-input>
          </div>
          <el-button type="primary" class="sousuoBox">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- con -->
    <div class="div3">
      <div class="div3_xinzen">
        <el-button
          type="primary"
          size="small"
          @click="centerDialogVisible2 = true"
          ><i class="el-icon-circle-plus-outline"></i
          ><span>新增</span></el-button
        >
        <!-- 弹窗 分值标准详情 -->
        <el-dialog :visible.sync="centerDialogVisible2" center class="eldialog">
          <div class="eldialog_top">分值标准详情</div>
          <div class="eldialog_con eldialog_con1">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="角色">
                <el-select v-model="form.region" >
                  <el-option label="一级管理员" value="1"></el-option>
                  <el-option label="二级管理员" value="2"></el-option>
                  <el-option label="三级管理员" value="3"></el-option>
                  <el-option label="专家评审" value="4"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="用户名">
                <el-input v-model="form.name"></el-input>
              </el-form-item>

              <el-form-item label="真实姓名">
                <el-input v-model="form.name"></el-input>
              </el-form-item>

              <el-form-item label="状态">
                <el-radio-group v-model="form.resource">
                  <el-radio label="正常"></el-radio>
                  <el-radio label="禁用"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="手机号码">
                <el-input v-model="form.name"></el-input>
              </el-form-item>

              <el-form-item label="邮箱">
                <el-input v-model="form.name"></el-input>
              </el-form-item>

              <el-form-item label="身份证">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="eldialog_con">
            <el-button
              class="eldialog_btn"
              plain
              type="primary"
              @click="centerDialogVisible2 = false"
              >取 消</el-button
            >
            <el-button
              class="eldialog_btn"
              type="primary"
              @click="centerDialogVisible2 = false"
              >保存</el-button
            >
          </div>
        </el-dialog>
      </div>
      <!-- 新增end -->
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="serialNumber" label="序号"> </el-table-column>
          <el-table-column prop="ApplicationDate" label="真实姓名">
          </el-table-column>
          <el-table-column prop="type" label="用户名"> </el-table-column>
          <el-table-column prop="organization" label="手机号" width="150px">
          </el-table-column>
          <el-table-column prop="ExperienceContent" label="角色">
          </el-table-column>
          <el-table-column prop="ReviewOperation" label="邮箱" width="180px">
          </el-table-column>
          <el-table-column prop="ReviewResults" label="账户状态">
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column fixed="right" label="操作" width="220px">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-button type="text" size="small">初始化密码</el-button>
              <el-button type="text" size="small">恢复</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <!-- con end -->

    <!-- 分页 -->
    <div class="div4">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
        background
      >
      </el-pagination>
    </div>
    <!-- 分页end -->
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {
      options: [
        {
          value: "1",
          label: "所有"
        },
        {
          value: "2",
          label: "正常"
        },
        {
          value: "3",
          label: "删除"
        },
      ],
      value: "1",
      options2: [
        {
          value: "1",
          label: "所有"
        },
        {
          value: "2",
          label: "一级管理员"
        },
        {
          value: "3",
          label: "二级管理员"
        },
        {
          value: "4",
          label: "三级管理员"
        },
        {
          value: "5",
          label: "专家评审"
        },
      ],
      value2: "1",

      input1: "",
      input2: "",
      // con
      tableData: [
        {
          serialNumber: "1",
          ApplicationDate: "王强",
          type: "zhnagsan",
          organization: "15688888888",
          ExperienceContent: "",
          ReviewOperation: "188888888@qq.com",
          ReviewResults: "正常"
        }
      ],
      // con end
      // 分页
      currentPage1: 5,
      // 分页end
      centerDialogVisible2: false, //弹窗
      form: {
        name: "",
        region: "1",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 操作
    handleClick(row) {
      console.log(row);
    }
  }
};
</script>
<style scoped>
.div1 {
  /* border: 1px solid #000; */
  background: #f5f6fa;
}

/* 头部搜索 */
.div2 {
  margin-bottom: 20px;
}
.div2,
.div3 {
  /* border: 1px solid rgb(18, 141, 241); */
  background: #fff;
  /* border-radius: 8px; */
  padding: 10px;
}
.div3 >>> .cell {
  line-height: 22px;
}
.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
}
/* 头部搜索 */
.sousuoBox {
  margin-left: 10px;
  height: 30px !important;
  padding: 0;
  width: 60px;
}
.topBox3_sou {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.topBox3_sou >>> .el-input {
  width: 180px;
}
.topBox3_sou > div {
  margin-right: 15px;
}
.topBox3_sou >>> .el-input__inner {
  height: 30px !important;
  line-height: 32px;
}

.topBox3_sou >>> .el-input__icon {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
}
/* 头部搜索end */

/* 内容 */
.div3 >>> .el-table thead {
  color: rgb(75, 74, 74) !important;
}
/* 内容end */
/* 分页 */
.div4 {
  background: #fff;
  width: 100%;
}
.div4 > :nth-child(1) {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.div4 >>> .el-pagination__total {
  position: absolute;
  left: 5px;
}
/* 分页end */
/* 新增 */
.div3_xinzen {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
/* 弹窗 */
.eldialog >>> .el-dialog {
  position: relative;
  min-width: 500px;
  min-height: 300px;
  border-radius: 6px;
  padding: 10px;
}
.eldialog >>> .el-dialog__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid #eee;
}
.eldialog >>> .el-dialog__headerbtn {
  top: 15px;
}
.eldialog_top {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 30px;
  line-height: 30px;
}
.eldialog_con {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.eldialog_con1 >>> .el-form-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.eldialog_con1 >>> .el-form-item__content {
  margin-left: 6px !important;
  flex: 1;
}
.eldialog_con1 >>> .el-select {
  width: 100%;
}

.eldialog_con1 >>> .el-form-item__label {
  margin: 0;
}

.eldialog_con1 >>> .el-radio-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.eldialog_con1 >>> .el-radio-group label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.eldialog_con1 >>> .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}

.eldialog_btn {
  margin-top: 20px;
  width: 90px;
  line-height: 30px;
  height: 30px;
  padding: 0;
}
</style>
